<template>
	<!-- 搜索页 -->
	<view class="container">
	  <view class="search-wrapper">
	    <view class="search-input">
	      <view class="search-input-wrapper">
	        <view class="left">
	          <text class="search-icon iconfont icon-search"></text>
	        </view>
			<!-- 输入框 -->
	        <view class="right">
	          <input v-model="searchValue" class="input" focus="true" placeholder="请输入您搜索的商品" type="text"></input>
	        </view>
	      </view>
	    </view>
		<!-- 搜索按钮 -->
	    <view class="search-button">
	      <view class="button" @click="onSearch">搜索</view>
	    </view>
	  </view>
	  <view class="history" v-if="historySearch.length">   <!-- 若数组长度大于0,则展现最近搜索 -->	    
	  <view class="his-head">
	      <text class="title">最近搜索</text>
	      <text class="icon iconfont icon-delete" @click="clearSearch"></text>
	    </view>
	    <view class="his-list">
	      <view class="his-item" v-for="(val, index) in historySearch" :key="index">
	        <view class="history-button" @click="handleQuick(val)">{{ val }}</view>
	      </view>
	    </view>
	  </view>
	</view>
</template>
//
<script>
 const HISTORY_SEARCH = 'historySearch'
import searchVue from './search.vue';
	export default {
		data() {
			return {
				searchValue:"",   // 双向绑定,搜索框值
				historySearch:[]
			}
		},
		methods: {
			onSearch(){ // 搜索点击事件
			const { searchValue } = this
				// 记录搜索历史
				this.setHistory(searchValue)
				// 跳转到商品列表页
				uni.navigateTo({
					url:'/pages/good/list?searchStr='+searchValue
				})
				
			},setHistory(searchValue){
				const data = this.getHistorySearch()
				const index = data.indexOf(searchValue)
				index > -1 && data.splice(index, 1)
				data.unshift(searchValue)
				this.historySearch = data
				this.onUpdateStorage()
			},
			clearSearch(){
				this.historySearch = []
				this.onUpdateStorage()
			},
			/**
			 * 更新历史搜索缓存
			 */
			onUpdateStorage(data) {
			  uni.setStorageSync(HISTORY_SEARCH, this.historySearch)
			},
			/**
			 * 获取历史搜索
			 */
			getHistorySearch() {
			  return uni.getStorageSync(HISTORY_SEARCH) || []
      }
		}
	}
</script>

<style lang="scss" scoped>
  .container {
    padding: 20rpx;
    min-height: 100vh;
    background: #f7f7f7;
  }

  .search-wrapper {
    display: flex;
    height: 64rpx;
  }

  // 搜索输入框
  .search-input {
    width: 80%;  // 80%
    background: #fff;
    border-radius: 10rpx 0 0 10rpx;
    box-sizing: border-box;
    overflow: hidden;

    .search-input-wrapper {
      display: flex;

      .left {
        display: flex;
        width: 60rpx;   // 60rpx
        justify-content: center;
        align-items: center;

        .search-icon {
          display: block;
          color: #b4b4b4;
          font-size: 28rpx;
        }

      }

      .right {
        flex: 1;

        input {
          font-size: 28rpx;
          height: 64rpx;
          display: flex;
          align-items: center;

          .input-placeholder {
            color: #aba9a9;
          }
        }

      }
    }
  }

  // 搜索按钮
  .search-button {
    width: 20%;
    box-sizing: border-box;

    .button {
      height: 64rpx;
      font-size: 28rpx;
      border-radius: 0 10rpx 10rpx 0;
      background: #fa2209;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }


  // 最近搜索
  .history {

    .his-head {
      font-size: 28rpx;
      padding: 50rpx 0 0 0;
      color: #777;

      .icon {
        float: right;
      }

    }

    .his-list {
      padding: 20rpx 0;
      overflow: hidden;

      .his-item {
        width: 33.3%;
        float: left;
        padding: 10rpx;
        box-sizing: border-box;

        .history-button {
          text-align: center;
          padding: 14rpx;
          line-height: 30rpx;
          border-radius: 100rpx;
          background: #fff;
          font-size: 26rpx;
          border: 1rpx solid #efefef;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

      }

    }
  }
</style>
